<template>
	<view>
		<view class="wrap">
			<view class="line-box">
				<view class="line-item u-flex">
					<view class="tit">计算方式</view>
					<view class="inner u-flex">
						<u-radio-group v-model="index" active-color="#de1f1c">
							<u-radio :name="0">
								按贷款总额
							</u-radio>
							<u-radio :name="1">
								按房屋总价
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
			
			
			<template v-if="index == 1">
				<view class="line-box">
					<view class="line-item u-flex">
						<view class="tit">房屋总价</view>
						<view class="inner u-flex">
							<input class="input" type="number" v-model="total" placeholder="0"/>
						</view>
						<text class="unit">万</text>
					</view>
				</view>
				<view class="line-box">
					<view class="line-item u-flex">
						<view class="tit">贷款比例</view>
						<view class="inner u-flex">
							<input class="input" type="digit" v-model="ratio" placeholder="0"/>
						</view>
						<text class="unit">成</text>
					</view>
				</view>
			</template>
			
			
			<view class="line-box">
				<view class="line-item u-flex">
					<view class="tit">公积金金额</view>
					<view class="inner u-flex">
						<input class="input" v-model="reserveAmount" :disabled="index == 1" type="number" placeholder="0"/>
					</view>
					<text class="unit">万</text>
				</view>
			</view>
			
			<view class="line-box">
				<view class="line-item u-flex">
					<view class="tit">公积金年限</view>
					<view class="inner">
						<picker @change="yearChange" :value="yearIndex" :range="years">
							<view class="input">{{ years[yearIndex] }}年</view>
						</picker>
					</view>
					<text class="iconfont icon-jiantouyou"></text>
				</view>
			</view>
			
			<view class="line-box">
				<view class="line-item u-flex">
					<view class="tit">公积金利率</view>
					<!-- <view class="inner">
						<picker @change="reserveChange" :value="index" :range="reserveData">
							<view class="input">{{ reserveData[reserveIndex] }}</view>
						</picker>
					</view>
					<text class="iconfont icon-jiantouyou"></text> -->
					<view class="inner u-flex">
						<input class="input" v-model="reserve" type="digit" placeholder="0"/>
					</view>
					<text class="unit">%</text>
				</view>
			</view>
			
		</view>
		
		<view class="btn-box">
			<u-button shape="circle" type="primary" @click="calculate">开始计算</u-button>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			loanData: ['按贷款总额', '按房屋总价'],
			years: [30, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
			TabCur: 1,
			navData: ['商业贷款', '公积金贷款', '组合贷款'],
			// navData: ['商业贷款', '公积金贷款'],
			index: 0,
			rateMode: ['按最新LPR', '按旧版基准利率'],
			rateIndex: 0, //利率类型索引
			yearIndex: 0, //贷款年限索引
			loanIndex: 0, //贷款价格类型索引
			lpr: 0, //贷款利率
			reserveData: ['最新基准利率(3.25%)', '最新基准利率上浮10%(3.575%)'],
			reserve: 0, //公积金利率
			reserveAmount: '', //公积金金额
			commercialLoanAmount: '', //商业贷款金额
			reserveIndex: 0, //公积金利率索引
			basisPoint: 0 ,//基点
			sdYearIndex:0,//组合商贷年限index
			gjjYearIndex:0,//组合公积金年限index
			total:'',//房屋总价
			ratio:7//贷款比例
		};
	},
	computed: {
		commercialLoanRate() {
			if (this.rateIndex == 1) {
				return this.lpr;
			} else {
				return this.lpr + this.basisPoint / 100;
			}
		}
	},
	onLoad() {
		this.reserve = Number(this.vuex_interestrate[0].accumulationfund)
	},
	watch:{
		total:function(){
			this.reserveAmount = this.total * this.ratio / 10
		},
		ratio:function(){
			this.reserveAmount = this.total * this.ratio / 10
		}
	},
	methods: {
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
		},
		PickerChange(e) {
			this.index = e.detail.value;
		},
		sdZhPickerChange(e){
			this.sdYearIndex = e.detail.value;
		},
		gjjZhPickerChange(e){
			this.gjjYearIndex = e.detail.value;
		},
		yearChange(e) {
			this.yearIndex = e.detail.value;
		},
		reserveChange(e) {
			this.reserveIndex = e.detail.value;
		},
		rateChange(e) {
			this.rateIndex = e.detail.value;
			if (this.rateIndex == 1) {
				this.lpr = 4.9;
			} else {
				this.lpr = 4.75;
			}
		},
		
		calculate() {
			if (this.TabCur == 0) {
				if(this.commercialLoanAmount <= 0){
					uni.showToast({
						icon:'none',
						title:'必须输入贷款金额'
					})
					return
				}
				let datas ={
					money:this.commercialLoanAmount,
					year:this.years[this.yearIndex],
					lilv:this.commercialLoanRate/100,
					title:'商业贷款'
				}
				uni.navigateTo({
					url:'/pages/more/loans-calc-result?datas=' + encodeURIComponent(JSON.stringify(datas))
				})
			}
			if (this.TabCur == 1) {
				if(this.reserveAmount <= 0){
					uni.showToast({
						icon:'none',
						title:'必须输入贷款金额'
					})
					return
				}
				
				let datas ={
					money:this.reserveAmount,
					year:this.years[this.yearIndex],
					lilv:this.reserve/100,
					title:'公积金贷款'
				}
				
				uni.navigateTo({
					url:'/pages/more/loans-calc-result?datas=' + decodeURIComponent(JSON.stringify(datas))
				})
			}
			if (this.TabCur == 2) {
				// sdnum, gjjnum, sdyear, gjjyear, sdlilv, gjjlilv
				if(this.reserveIndex == 0){
					this.reserve = 3.25
				}else{
					this.reserve = 3.575
				}
				if(this.reserveAmount >70){
					uni.showToast({
						icon:'none',
						title:'公积金贷款总额度不超过70万'
					})
					this.reserveAmount = 70;
					return
				}
				
				if((this.reserveAmount + this.commercialLoanAmount) <= 0){
					uni.showToast({
						icon:'none',
						title:'必须输入贷款金额'
					})
					return
				}
				
				let datas={
					sdmoney:this.commercialLoanAmount,
					sdyear:this.years[this.sdYearIndex],
					sdlilv:this.commercialLoanRate/100,
					gjjmoney:this.reserveAmount,
					gjjyear:this.years[this.gjjYearIndex],
					gjjlilv:this.reserve/100,
					title:'组合贷款'
				}
				uni.navigateTo({
					url:'/pages/more/loans-calc-result?datas=' + encodeURIComponent(JSON.stringify(datas))
				})
			}
		}
	}
};
</script>

<style lang="scss">
	.wrap{padding: 0 40rpx;}
	.line-box{border-bottom: 1rpx solid #ececec;
		.line-item{padding: 25rpx 0;
			.tit{font-size: 30rpx;color: #111;font-weight: bold;white-space: nowrap;width: 280rpx;}
			.unit{font-size: 30rpx;color: #111;font-weight: bold;white-space: nowrap;}
			.iconfont{color: #606266;}
			.inner{margin-right: auto;justify-content: flex-start;width: 100%;
				.input{width: 100%;}
			}
		}
		.lpr-info{margin-bottom: 25rpx;background-color: #ffe6e6;padding: 15rpx;
			.date{background-color: $tc;color: #fff;font-size: 24rpx;border-radius: 6rpx;margin-right: 18rpx;padding: 4rpx 16rpx;}
			.info{margin-right: auto;font-size: 24rpx;}
			.history{color: $tc;white-space: nowrap;font-weight: bold;}
		}
	}
	.btn-box{padding: 120rpx 40rpx 0;}
</style>
